<template>
    <el-skeleton 
    :loading="loading" 
    animated
    >
        <template slot="template">
            <div class="pg-body">
                <div class="row">
                    <el-skeleton-item variant="p" style="width: 500px; height: 40px;" />
                </div>

                <div class="row">
                    <el-skeleton-item variant="p" style="width: 200px; height: 30px;" />
                </div>

                <div class="row">
                    <el-skeleton-item variant="p" style="width: 600px; height: 26px;" />
                </div>

                <div class="row">
                    <el-skeleton-item variant="p" style="width: 100px; height: 26px;" />
                </div>

                <div class="row">
                    <el-skeleton-item variant="p" style="width: 100%; height: 500px;" />
                </div>

                <div class="row">
                    <el-skeleton-item variant="p" style="width: 100px; height: 26px;" />
                </div>

                <div class="row">
                    <el-skeleton-item variant="p" style="width: 100%; height: 500px;" />
                </div>
            </div>
        </template>

        <slot></slot>
    </el-skeleton>
</template>

<script>
export default {
    props: {
        loading: {
            type: Boolean,
            default: false,
        },
    },
};
</script>

<style lang="scss" scoped>
    .pg-body{
        padding: 8px 0;

        .row{
            & + .row{
                margin-top: 14px;
            }
        }
    }
</style>